<template>
    <div>
      <div class="top-row">
        <el-tag type="info">共 {{ nodes.length }} 项</el-tag>
        <el-input v-model="kw" placeholder="搜索名称/编码" clearable style="width:240px"/>
      </div>
  
      <div class="card-grid">
        <el-empty v-if="filtered.length===0" description="暂无数据"/>
        <el-card v-for="c in filtered" :key="c.id" class="child-card" shadow="hover">
          <template #header>
            <div class="card-hd">
              <span class="name">{{ c.name }}</span>
              <el-tag size="small" type="warning">{{ labelByType(c.type) }}</el-tag>
            </div>
          </template>
          <div class="kv"><span class="k">编码：</span><span class="v">{{ c.code || '-' }}</span></div>
          <div class="kv"><span class="k">层级：</span><span class="v">{{ c.level || '-' }}</span></div>
          <div class="kv"><span class="k">路径：</span><span class="v path-text" :title="fullPath(c)">{{ fullPath(c) }}</span></div>
          <div class="kv"><span class="k">备件：</span><span class="v">{{ c.spareInfo?.name || '-' }}</span></div>
          <div class="actions">
            <el-button size="small" @click="$emit('open-detail', c)">详情</el-button>
            <el-button size="small" type="primary" plain @click="$emit('open-edit', c)">修改</el-button>
            <el-button size="small" type="success" plain @click="$emit('open-add-child', c)">新增子项</el-button>
            <el-button size="small" @click="$emit('copy-path', c)">复制路径</el-button>
            <el-button size="small" type="warning" @click="$emit('open-repair-history', c)">维修历史</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import {ref,computed} from 'vue';
  const props = defineProps({
    mother: Object,
    descendants: {type:Array, default:()=>[]},
    fullPath: Function,
  });
  const kw = ref('');
  const nodes = computed(()=> props.descendants || []);
  const filtered = computed(()=> {
    const k = (kw.value||'').trim().toLowerCase();
    if(!k) return nodes.value;
    return nodes.value.filter(x=> (x.name+x.code+x.remark).toLowerCase().includes(k));
  });
  function labelByType(t=''){ 
    const m={MACHINE:'母设备',MODULE:'子设备',COMPONENT:'部件',PART:'零件'};
    return m[String(t).toUpperCase()]||t||'—';
  }
  </script>
  
  <style scoped>
  .top-row{ display:flex; justify-content:space-between; margin-bottom:10px; }
  .card-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
  @media (max-width: 720px){ .card-grid{ grid-template-columns:1fr; } }
  .child-card .card-hd{ display:flex; justify-content:space-between; align-items:center; }
  .name{ font-weight:600; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kv{ margin:4px 0; }
  .k{ color:#909399; margin-right:4px; }
  .actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .path-text{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  </style>
  